<template>
	<view>
		<view class="info-detail-wrap">
			<view class="header">

				<view class="left">
					检查点基本信息
				</view>
				<view class="right" @tap="goEdit">
					<image src="/fireGridCheck/static/bianji.png" mode="scaleToFill" style="width: 28rpx;height: 28rpx;"></image>
					<view style="margin-left:6rpx">
						编辑
					</view>
				</view>

			</view>
			<view class="info-list">
				<!-- 	<view class="info-detail-info-item">
					检查点类型：{{types['checkPointType'][info['检查点类型']]}}
				</view> -->

				<clinic ref="clinic" v-if="info['检查点类型'] == 'clinic'" />
				<company ref="company" v-if="info['检查点类型'] == 'company'" />
				<rentalHouse ref="rentalHouse" v-if="info['检查点类型'] == 'rentalHouse'" />
				<residential ref="residential" v-if="info['检查点类型'] == 'residential'" />
				<restaurant ref="restaurant" v-if="info['检查点类型'] == 'restaurant'" />
				<shop ref="shop" v-if="info['检查点类型'] == 'shop'"></shop>
				<publicarea ref="publicarea" v-if="info['检查点类型'] == 'publicarea'"></publicarea>
				<room ref="room" v-if="info['检查点类型'] == 'room'"></room>
			</view>

			<!-- <installList ref="installList" /> -->
			<!-- {{JSON.stringify(installList)}} -->
			<view class="install-list-info">
				设施统计
			</view>
			<view class="" v-if="installList.length==0" style="font-size: 20rpx;">
				暂无数据
			</view>
			<view v-else class="install-list">

				<view class="install-list-title">
					消防栓: {{hydrantLength}}个
				</view>
				<view class="install-list-title">
					灭火器: {{annihilatorLength}}个
				</view>
				<view class="install-list-title">
					烟雾探测器: {{smokeLength}}个
				</view>
				<view class="install-list-title">
					温度探测器: {{temperateLength}}个
				</view>
				<view class="install-list-title">
					煤气罐: {{gasTankLength}}个
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import clinic from './basicInfo/clinic.vue'
	import company from './basicInfo/company.vue'
	import rentalHouse from './basicInfo/rentalHouse.vue'
	import residential from './basicInfo/residential.vue'
	import restaurant from './basicInfo/restaurant.vue'
	import shop from './basicInfo/shop.vue'
	import publicarea from './basicInfo/publicarea.vue'
	import room from './basicInfo/room.vue'
	// import installList from './basicInfo/installList.vue'
	export default {
		components: {
			clinic,
			company,
			rentalHouse,
			residential,
			restaurant,
			shop,
			publicarea,
			room
			// installList,

		},
		data() {
			return {
				hydrantLength: 0,
				annihilatorLength: 0,
				smokeLength: 0,
				temperateLength: 0,
				gasTankLength: 0,
				info: {

				},
				facilityType: this.$type.facilityType,
				installList: [],
			}
		},

		mounted() {

		},
		methods: {
			//获取详情
			async getInfo(id) {
				uni.showLoading({
					title: '加载中...'
				})
				console.log(id)
				let res = await this.$http.post('gridSystem/checkPoint/info', {
					id
				})
				console.log(res)
				if (res.code === 10000) {
					this.info = res.data

				} else {
					uni.showToast({
						title: '获取检查点信息失败',
						icon: 'none'
					})
				}

				let res1 = await this.$http.post('gridSystem/device/listWithoutAuth', {
					检查点id: id
				})
				if (res1.code === 10000) {
					if(res1.data.list !== null) {
						this.installList = res1.data.list
						this.hydrantLength = res1.data.list.filter(item => item.设施类型 === 'hydrant').length
						this.annihilatorLength = res1.data.list.filter(item => item.设施类型 === 'annihilator').length
						this.smokeLength = res1.data.list.filter(item => item.设施类型 === 'smokeDetector').length
						this.temperateLength = res1.data.list.filter(item => item.设施类型 === 'temperatureDetector').length
						this.gasTankLength = res1.data.list.filter(item => item.设施类型 === 'gasTank').length
					}
					// for (let key in this.facilityType) {
					// 	let list = (res1.data.list || []).filter(x => x.设施类型 == key)
					// 	console.log(key, list)
					// 	if (list && list.length > 0) {
					// 		this.installList.push({
					// 			key,
					// 			list
					// 		})
					// 	}
					// }
					console.log("res", this.installList)
				} else {
					console.log('获取设施失败')
				}
				uni.hideLoading()
				// this.$refs.installList.getInstallList(id)
				// this.getInstallList(id)
				//v-if需要让子组件加载后设置值
				this.$nextTick(() => {
					this.$refs[this.info["检查点类型"]].setFields(this.info)
				})
			},
			// getInstallList(id) {
			// 	let that = this
			// 	this.$http.post('gridSystem/device/listWithoutAuth', {
			// 		检查点id: id
			// 	}).then(res => {

			// 		if (res.code === 10000) {
			// 			for (let key in this.facilityType) {
			// 				let list = res.data.list.filter(x => x.设施类型 == key)
			// 				console.log(key, list)
			// 				if (list && list.length > 0) {
			// 					this.installList[key] = list
			// 				}
			// 			}
			// 			console.log("res", this.installList)
			// 			// this.count = Object.keys(this.installList).length

			// 		}
			// 	})
			// },
			goEdit() {
				let page = '/fireGridCheck/' + this.info.检查点类型 + 'Detail/' + this.info.检查点类型 + 'Detail?id=' + this.info.id
				if (this.info.检查点类型 == 'residential') {
					page = '/fireGridCheck/villageDetail/villageDetail?id=' + this.info.id
				}else if (this.info.检查点类型 == 'room') {
					this.$refs.room.goDetail(this.info)
					return
				}

				uni.navigateTo({
					url: page
				})
			}
		}
	}
</script>
f
<style lang="scss" scoped>
	.info-detail-wrap {
		padding: 20rpx;

		.header {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			&::before {
				content: "";
				display: inline-block;
				width: 6px;
				height: 30px;
				background: #1064E9;
				position: absolute;
			}

			.left {
				padding: 20rpx 32rpx;
				font-size: 32rpx;
				color: #333333;
			}

			.right {
				display: flex;
				align-items: center;
				color: #5094FF;
			}
		}


		.info-list {
			font-size: 24rpx;
			font-family: Noto Sans S Chinese;
			font-weight: 400;
			color: #333333;

			.info-item {
				padding: 26rpx 20rpx;
			}
		}

		.install-list-info {

			margin-top: 30rpx;
			font-size: 32rpx;
			font-family: Noto Sans S Chinese;
			font-weight: 400;
			color: #333333;

		}

		.install-list-info::before {
			content: "";
			display: inline-block;
			width: 6rpx;
			height: 32rpx;
			background: #5094FF;
			margin-right: 10rpx;
		}

		.install-list {
			padding: 20rpx;
			color: #333333;
			border-bottom: 1rpx solid #efefef;

			.install-list-title {
				padding: 20rpx 0;
				font-size: 28rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				border-bottom: 1rpx solid #efefef;

			}

			.install-list-item {
				font-size: 24rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				margin: 20rpx 10rpx;
			}
		}
	}
</style>
